<!DOCTYPE html>
<html lang="cn">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			.wrap,
			.circle,
			.percent {
				position: absolute;
				width: 200px;
				height: 200px;
				border-radius: 50%;
			}

			.wrap {
				top: 50px;
				left: 50px;
				background-color: #ccc;
			}

			.circle {
				box-sizing: border-box;
				border: 20px solid #ccc;
				clip: rect(0, 200px, 200px, 100px);
			}

			.clip-auto {
				clip: rect(auto, auto, auto, auto);
			}

			.percent {
				box-sizing: border-box;
				top: -20px;
				left: -20px;
			}

			.left {
				transition: transform ease;
				border: 20px solid blue;
				clip: rect(0, 100px, 200px, 0);
			}

			.right {
				border: 20px solid blue;
				clip: rect(0, 200px, 200px, 100px);
			}

			.wth0 {
				width: 0;
			}

			.num {
				position: absolute;
				box-sizing: border-box;
				width: 160px;
				height: 160px;
				line-height: 160px;
				text-align: center;
				font-size: 40px;
				left: 20px;
				top: 20px;
				border-radius: 50%;
				background-color: #fff;
				z-index: 1;
			}
		</style>
		<script src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js"></script>
	</head>
	<body>
		<!-- 方法一：两个clip过的半圆  原文来自：http://blog.csdn.net/angeljsl/article/details/51208960-->
		<div class="wrap">
			<div class="circle">
				<div class="percent left"></div>
				<div class="percent right wth0"></div>
			</div>
			<div class="num"><span>0</span>%</div>
		</div>
	</body>
	<script>
		var percent = 0;
		var loading = setInterval(function() {
			if (percent > 100) {
				percent = 0;
				$('.circle').removeClass('clip-auto');
				$('.right').addClass('wth0');
			} else if (percent > 50) {
				$('.circle').addClass('clip-auto');
				$('.right').removeClass('wth0');
			}
			$('.left').css("-webkit-transform", "rotate(" + (18 / 5) * percent + "deg)");
			$('.num>span').text(percent);
			percent++;
		}, 200);
	</script>
</html>
